<template>
	<div class="_nav iot-flex">
		<span @tap="onSelect(index)" :class="{'active': index === value}" v-for="item,index in nav" :key="index">{{item}}</span>
	</div>
</template>

<script>
	export default {
		props: {
			value: {
				type: Number,
				default: 0
			},
			nav: {
				type: Array,
				default: ['选项卡1','选项卡2']
			}
		},
		data(){
			return {
				
			}
		},
		methods: {
			onSelect(index){
				this.$emit('input',index)
			}
		}
	}
</script>

<style lang="scss">
	._nav{
		height: 12.8vw;
		width: 100vw;
		background-color: #FFF;
		position: relative;
		z-index: 3;
		span{
			display: flex;
			align-items: center;
			justify-content: center;
			flex: 1;
			border-bottom: 2px solid transparent;
			height: 100%;
			font-size: 3.75vw;
			color: #AAA;
			font-weight: 300;
		}
		.active{
			border-color: #000;
			color: #000;
			font-weight: 500;
		}
	}
</style>
